<template>
  <div class="grid grid-cols-2">
    <div>
      <line-chart :value="data" />
      <bar-chart :value="data" />
    </div>
    <pie-chart :value="data" />
  </div>
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onMounted, ref } from 'vue';
  import LineChart from '@/views/demo/charts/LineChart.vue';
  import BarChart from '@/views/demo/charts/BarChart.vue';
  import PieChart from '@/views/demo/charts/PieChart.vue';

  const data = ref<any[]>([]);

  let timer;
  onMounted(() => {
    getData();
    timer = setInterval(() => {
      getData();
    }, 2000);
  });

  function getData() {
    let arr: any[] = [];
    for (let i = 0; i < 7; i++) {
      arr.push(Math.round(Math.random() * 10) + 5);
    }
    data.value = arr.map((i, idx) => {
      return {
        value: i,
        name: 'item-' + idx,
      };
    });
  }

  onBeforeUnmount(() => {
    clearInterval(timer);
    timer = null;
  });
</script>

<style scoped></style>
